<template>
  <div class="box">
    <div class="box_one">
      <div class="box_list">1</div>
      <div class="box_content">
        <div class="early_title">前期测绘机构选取方式</div>
        <div class="early_select">
          <span>选取方式</span>
          <el-select v-model="value" placeholder="--请选择--" @change="changeValue">
            <el-option
              v-for="item in options"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </div>
        <div class="early_select" v-show="flag1">
          <span>招标文件</span>
          <div class="upLoadImg">
            <upload ref="hetongBox1" @beforeUpload="beforeUpload" @res="getRes($event,1)" :accept="'.pdf'" />
          </div>
        </div>
        <div class="early_select" v-show="flag2">
          <span>采购文件</span>
          <div class="upLoadImg">
            <upload ref="hetongBox2" @beforeUpload="beforeUpload" @res="getRes($event,2)" :accept="'.pdf'" />
          </div>
        </div>
        <div class="early_select" v-show="flag3">
          <span>抽取报告</span>
          <div class="upLoadImg">
            <upload ref="hetongBox3" @beforeUpload="beforeUpload" @res="getRes($event,3)" :accept="'.pdf'" />
          </div>
        </div>
      </div>
    </div>
    <div class="box_one box_two">
      <div class="box_list">2</div>
      <div class="box_content">
        <div class="early_title">前期测绘机构名称</div>
        <div class="early_select">
          <!-- <span>单位是否已在诚信管理系统注册</span>
          <el-checkbox-group v-model="checkBox" @change="changeCheckBox">
            <el-checkbox label=" "></el-checkbox>
          </el-checkbox-group> -->
          <!-- <el-radio-group v-model="isRadio" @change="changeRadio">
            <el-radio label="YES">是</el-radio>
            <el-radio label="NO">否</el-radio>
          </el-radio-group> -->
          <span>机构名称：</span>
            <el-select
              v-model="companyValue"
              filterable
              placeholder="--请选择--"
              @change="changeCompany"
            >
              <el-option
                v-for="item in companyList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
        </div>
        <!-- <div class="early_select early_selectTwo">
          <div >
            
          </div>
          <div v-if="isFlag2" class="lineBlo">
             <span>机构名称：</span>
            <el-input v-model="inputCompany" placeholder="请输入公司名称"></el-input>
          </div>
        </div> -->
        <div class="early_select early_selectTwo" v-show="flag1">
          <span>中标通知书</span>
          <div class="upLoadImg">
            <upload ref="hetongBox4" @beforeUpload="beforeUpload" @res="getRes($event,4)" :accept="'.pdf'" />
          </div>
        </div>
        <div class="early_select early_selectTwo" v-show="flag2">
          <span>中选/标通知书</span>
          <div class="upLoadImg">
            <upload ref="hetongBox5" @beforeUpload="beforeUpload" @res="getRes($event,5)" :accept="'.pdf'" />
          </div>
        </div>
        <div class="early_select early_selectTwo" v-show="flag3">
          <span>抽取公告</span>
          <div class="upLoadImg">
            <upload ref="hetongBox6" @beforeUpload="beforeUpload" @res="getRes($event,6)" :accept="'.pdf'" />
          </div>
        </div>
      </div>
    </div>
    <div class="box_one box_two">
      <div class="box_list">3</div>
      <div class="box_content">
        <div class="early_title">合同信息</div>

        <div class="early_select">
          <span>已签订的合同</span>
          <div class="upLoadImg">
            <upload ref="hetongBox7" @beforeUpload="beforeUpload" @res="getRes($event,7)" :accept="'.pdf'"/>
          </div>
        </div>
      </div>
    </div>
    <!-- <embed  height=200 width=200> -->

    <div class="btn">
      <el-button
        size="medium"
        :disabled="noUpload"
        :loading="isLoading"
        type="primary"
        @click="btn_submit"
      >提交</el-button>
      <el-button size="medium" @click="getCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { constants } from "crypto";
import { upImg } from "@/api/upImg";
import {
  get_early_choose_way,
  commit_organization,
  list_registered_enterprise
} from "@/api/earlySelect";
import { truncate } from "fs";
import upload from "@/components/upload";
export default {
  components: {
    upload
  },
  data() {
    return {
      showFlag:true,
      noUpload: false,
      options: [],
      value: "G_K_Z_B",
      flag1: true,
      flag2: true,
      flag3: true,
      isFlag1: false,
      isFlag2: false,
      
      isRadio: "",
      companyList: [],
      companyValue: "",
      companyName: "",
      inputCompany: "",

      isLoading: false,

      wenjianObj: {
        wenjian1: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian2: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian3: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian4: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian5: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian6: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian7: {
          fileName: "",
          fileUrl: "",
          id: ""
        }
      },
      checkBox:'',
      isYESorNo:'NO'
    };
  },
  created() {
    this.get_early_select_way();
    this.getEnterprise();
    this.changeValue();
  },
  methods: {
    // changeCheckBox(v){
      
    //   if(v==true){
    //     this.isYESorNo="YES"
    //     this.isFlag1=true
    //   }else{
    //     this.isYESorNo="NO"
    //     this.isFlag1=false
    //   }
    //   console.log(v,'vvvv',this.checkBox)
    // },
    //上传前
    beforeUpload() {
      this.isLoading = true;
    },
    //上传后
    getRes(res, index) {
      this.wenjianObj["wenjian" + index].fileName = res.data.fileName;
      this.wenjianObj["wenjian" + index].fileUrl = res.data.filePath;
      this.wenjianObj["wenjian" + index].id = res.data.id;
      this.noUpload = false;
      this.isLoading = false;
      this.$message({
        message: "上传成功",
        type: "success"
      });
    },
    // changeRadio(val) {//单选按钮
    //   this.isRadio=val
    //   if(this.isRadio=="YES"){
    //     this.isFlag1 = true;
    //     this.isFlag2 = false;
    //   }else if(this.isRadio='NO'){
    //     this.isFlag2 = true;
    //     this.isFlag1 = false;
    //   }
    // },
    btn_submit() {
      //提交
      const that = this;
      // if (that.value == 0) {
      //   that.$message({
      //     message: "请选择选取方式",
      //     type: "warning"
      //   });
      //   return;
      // }
      // if (that.isYESorNo == "NO") {
      //   that.$message({
      //     message: "单位是否已在诚信管理系统注册?",
      //     type: "warning"
      //   });
      //   return;
      // }

      let obj = {
        projectId: localStorage.getItem("projectId"),
        chooseWay: that.value,
        //isRegister: that.isYESorNo,
        contractId: that.wenjianObj.wenjian7.id
      };
      if (that.companyValue == "") {
        that.$message({
          message: "请选择单位",
          type: "warning"
        });
        return;
      }else{
        obj["companyId"] = that.companyValue;
        //obj["companyName"] = that.companyName;
      }
      
      if (that.value == "G_K_Z_B") {
        obj["tenderingId"] = that.wenjianObj.wenjian1.id;
        obj["winningDidId"] = that.wenjianObj.wenjian4.id;
      } else if (that.value == "Z_F_C_G") {
        obj["purchaseId"] = that.wenjianObj.wenjian2.id;
        obj["winningDidToId"] = that.wenjianObj.wenjian5.id;
      } else if (that.value == "J_K_S_J_C_Q") {
        obj["extractId"] = that.wenjianObj.wenjian3.id;
        obj["resultNoticeId"] = that.wenjianObj.wenjian6.id;
      }
      that.isLoading = true;
      console.log(obj, "obj");
      commit_organization(obj).then(res => {
        that.isLoading = false;
        if (res.code == 1000) {
          this.$alert("当前流程办理完成", "提示", {
            confirmButtonText: "确定",
            callback: action => {}
          });
        } else {
          that.$message({
            message: res.msg,
            type: "error"
          });
        }
        that.getCancel();
      }).catch(error=>{
          this.isLoading=false
        });
    },
    getEnterprise() {
      list_registered_enterprise().then(res => {
        this.companyList = res.data;
      });
    },
    get_early_select_way() {
      //获取前期测绘选择方式
      get_early_choose_way().then(res => {
        this.options = res.data;
        this.options.unshift({
          value: "0",
          code: "0",
          name: "--请选择--"
        });
      });
    },
    changeCompany() {
      console.log(this.companyValue, "companyValue");
      //this.companyName
      this.companyList.forEach(item => {
        if (this.companyValue == item.id) {
          this.companyName = item.name;
        }
      });
    },
    changeValue() {
      this.$nextTick(()=>{
        this.$refs.hetongBox7.setValue(1)
      })
      //下拉框值
      console.log(this.value);
      this.checkBox=''
      if (this.value == 0) {
        this.flag1 = false;
        this.flag2 = false;
        this.flag3 = false;
        this.getClear();
      } else if (this.value == "G_K_Z_B") {
        this.flag1 = true;
        this.flag2 = false;
        this.flag3 = false;
        //this.isRadio = "";
        this.isFlag1 = false;
         this.isFlag2 = false;
        this.$nextTick(()=>{
          this.$refs.hetongBox2.setValue(1)
          this.$refs.hetongBox3.setValue(1)
          this.$refs.hetongBox5.setValue(1)
          this.$refs.hetongBox6.setValue(1)
        })

        this.wenjianObj.wenjian2 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian3 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian5 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian6 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian7 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
      } else if (this.value == "Z_F_C_G") {
        this.flag2 = true;
        this.flag1 = false;
        this.flag3 = false;
        this.isFlag1 = false;
        this.isFlag2 = false;
        this.isRadio = "";
        this.$nextTick(()=>{
          this.$refs.hetongBox1.setValue(1)
          this.$refs.hetongBox3.setValue(1)
          this.$refs.hetongBox4.setValue(1)
          this.$refs.hetongBox6.setValue(1)
        })
        this.wenjianObj.wenjian1 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian3 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian4 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian6 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian7 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
      } else if (this.value == "J_K_S_J_C_Q") {
        this.flag3 = true;
        this.flag1 = false;
        this.flag2 = false;
        this.isRadio = "";
        this.isFlag1 = false;
        this.isFlag2 = false;
         this.$nextTick(()=>{
          this.$refs.hetongBox1.setValue(1)
          this.$refs.hetongBox2.setValue(1)
          this.$refs.hetongBox4.setValue(1)
          this.$refs.hetongBox5.setValue(1)
        })
        this.wenjianObj.wenjian1 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian2 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian4 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian5 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian7 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
      }
    },
    getCancel() {
      //取消
      // this.get_early_select_way()
      this.flag1 = false;
      this.flag2 = false;
      this.flag3 = false;
      this.getClear();
    },
    getClear() {
      //清空值
      this.$nextTick(()=>{
        this.$refs.hetongBox1.setValue(1)
        this.$refs.hetongBox2.setValue(1)
        this.$refs.hetongBox3.setValue(1)
        this.$refs.hetongBox4.setValue(1)
        this.$refs.hetongBox5.setValue(1)
        this.$refs.hetongBox6.setValue(1)
        this.$refs.hetongBox7.setValue(1)
      })
      this.value = "G_K_Z_B"
      this.wenjianObj={
        wenjian1: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian2: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian3: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian4: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian5: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian6: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian7: {
          fileName: "",
          fileUrl: "",
          id: ""
        }
      }
      this.checkBox=''
      this.isLoading=false
      this.isRadio = "";
      this.isFlag1 = false;
      this.isFlag2 = false;
    }
  }
};
</script>

<style lang="scss">
.form .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>
.box {
  padding: 60px;
  .box_one {
    display: flex;
    .box_list {
      background: #2e8ae6;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      font-size: 20px;
      color: white;
      margin-top: 8px;
    }

    .box_content {
      margin-left: 20px;

      .early_title {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        line-height: 50px;
        margin-bottom: 20px;
      }
      .early_select {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #444;
        font-weight: bold;
        margin-bottom: 25px;
        span {
          margin-right: 20px;
        }
        .upLoadImg {
          display: flex;
          align-items: center;

          .btnUpload {
            width: 90px;
            margin-right: 20px;
          }
        }
      }
    }
  }
  .box_two {
    .box_list {
      opacity: 0.5;
    }
    .box_content {
      .early_selectTwo {
        // display:flex;
        // align-items: center;
        span {
          width: 90px;
          margin-right: 10px;
        }
      }
    }
  }
  .btn {
    // text-align: center;
    margin-top: 20px;
    margin-left: 50px;
  }
  .lineBlo{
    display: flex;
    align-items: center;
  }
}
</style>
